<template>
  <section class="webview fixHeight">
    <el-scrollbar style="height:100%">
      <el-form ref="form" :model="detail" label-width="100px" class="form">
        <el-form-item label="出租标题">
          <el-input v-model="detail.title" />
        </el-form-item>
		<el-form-item label="户室号">
          <el-input v-model="detail.buildingNum" />
        </el-form-item>
		<el-form-item label="室友要求">
          <el-input v-model="detail.roommateRequirement" />
        </el-form-item>
        <el-form-item label="房屋标签">
			<el-input v-model="detail.tagsType" />
        </el-form-item>
        <el-form-item label="月租金">
          <el-input v-model="detail.monthlyRent" />
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="detail.area" />
        </el-form-item>
        <el-form-item label="户型">
          <el-select v-model="detail.apartmentType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_apartment_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
		<el-form-item label="厅数">
		  <el-input v-model="detail.apartmentTypeHall" />
		</el-form-item>
		<el-form-item label="卫数">
		  <el-input v-model="detail.apartmentTypeDefend" />
		</el-form-item>
		<el-form-item label="楼层">
		  <el-input v-model="detail.floorString" />
		</el-form-item>
		<el-form-item label="总层数">
		  <el-input v-model="detail.totalFoor" />
		</el-form-item>
		<el-form-item label="已出租">
		  <el-input v-model="detail.alreadyTenants" />
		</el-form-item>
		<el-form-item label="总户数">
		  <el-input v-model="detail.totalTenants" />
		</el-form-item>
		<el-form-item label="待租卧室">
		  <el-select v-model="detail.roomType" placeholder="卧室类型">
		    <el-option
		      v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_root_type')"
		      :key="item.id"
		      :label="item.title"
		      :value="item.simplify"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="卧室朝向">
		  <el-input v-model="detail.roomOrientation" />
		</el-form-item>
		<el-form-item label="室友类型">
		  <el-select v-model="detail.roommateType" placeholder="限制室友类型">
		    <el-option
		      v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_roommate_type')"
		      :key="item.id"
		      :label="item.title"
		      :value="item.simplify"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="付款方式">
		  <el-select v-model="detail.payType" placeholder="付款方式">
		    <el-option
		      v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_pay_type')"
		      :key="item.id"
		      :label="item.title"
		      :value="item.simplify"
		    />
		  </el-select>
		</el-form-item>
        <el-form-item label="是否合租">
          <el-select v-model="detail.isSharing" placeholder="请选择">
            <el-option
              label="是"
              :value="true"
            />
            <el-option
              label="否"
              :value="false"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否有电梯">
          <el-select v-model="detail.haveLevator" placeholder="请选择">
            <el-option
              label="是"
              :value="true"
            />
            <el-option
              label="否"
              :value="false"
            />
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="装修类型">-->
        <!--          <el-select v-model="detail.buildingType" placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_renovation_type')"-->
        <!--              :key="item.id"-->
        <!--              :label="item.title"-->
        <!--              :value="item.simplify"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="房屋朝向">
          <el-input v-model="detail.houseOrientation" />
        </el-form-item> 
		 <el-form-item label="全景图">
          <el-input v-model="detail.vrPath" />
        </el-form-item>
        <el-form-item label="房屋类型">
          <el-select v-model="detail.houseType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_house_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
		<el-form-item label="装修情况">
		  <el-select v-model="detail.renovationType" placeholder="装修情况">
		    <el-option
		      v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_renovation_type')"
		      :key="item.id"
		      :label="item.title"
		      :value="item.simplify"
		    />
		  </el-select>
		</el-form-item>
        <el-form-item label="权属">
          <el-select v-model="detail.ownershipType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_ownership_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在小区">
          <el-select v-model="detail.residentialId" placeholder="请选择">
            <el-option
              v-for="item in residentialIdOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年代">
          <el-input v-model="detail.buildingYear" />
        </el-form-item>
        <el-form-item label="看房类型">
          <el-select v-model="detail.lookType" placeholder="请选择">
            <el-option
              v-for="item in $store.state.user.typeList.filter(item=>item.typeSimplify == 'hou_look_type')"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房屋亮点">
          <el-input v-model="detail.houseHighlights" />
        </el-form-item>
        <el-form-item label="出租要求">
          <el-input v-model="detail.leaseRequirement" />
        </el-form-item>
        <el-form-item label="展示图片">
          <div class="picList">
            <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_indoor_picture')" class="item">
              <img class="pic" :src="item.pictureUrl" alt>
              <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
            </div>
          </div>
          
        </el-form-item>
		<el-form-item label="户型图">
		  <div class="picList">
		    <div v-for="(item,index) in resourcesList.filter(item=>item.type == 'hou_house_resources_apartment_pictures')" class="item">
		      <img class="pic" :src="item.pictureUrl" alt>
		      <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
		    </div>
		  </div>
		  
		</el-form-item>
		<el-form-item  label="视频">
		  <div class="picList">
		    <div class="item">
		      <video class="pic"  controls="controls" :src="detail.videoPath" ></video>
		      <!-- <i class="el-icon-delete delIcon hand" @click="handleRemove(item,index)" /> -->
		    </div>
		  </div>
		  
		</el-form-item>
        <el-form-item label="相关配套">
			<span style="margin-right: 15px;"  v-for="item in JSON.parse(detail.relatedMatching)">{{item.title}}</span>
         <!-- <el-select v-model="detail.relatedMatching" multiple placeholder="请选择">
            <el-option
              v-for="item in detail.relatedMatching"
              :key="item.id"
              :label="item.title"
              :value="item.simplify"
            />
          </el-select> -->
        </el-form-item>

        <el-form-item>
<!--          <el-button type="primary" @click="submit">提交</el-button>-->
          <el-button @click="cancel">返回</el-button>
		  <el-button v-if="$route.query.id" @click="ok($route.query.id)">通过</el-button>
		  <el-button v-if="$route.query.id" @click="back($route.query.id)">打回</el-button>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </section>
</template>
<script>
  import { resourcesAdd, resourcesList, resourcesDelete, developersList, rentAdd, rentUpdate, rentDetail, residentialList,lupdateStatus } from '@/api/api'
  export default {
    data() {
      return {
        resourcesList: [],
        residentialIdOptions: [],
        detail: {
          'alreadyTenants': 0,
          'apartmentType': '',
          'area': 0,
          'buildingNum': '',
          'buildingYear': '',
          'communalFacilities': '',
          'detailedIntroduction': '',
          'floor': 0,
          'haveLevator': true,
          'houseHighlights': '',
          'houseOrientation': '',
          'houseType': '',
          'isSharing': 0,
          'leaseRequirement': '',
          'leaseTerm': 0,
          'lookType': '',
          'monthlyRent': 0,
          'ownershipType': '',
          'payType': '',
          'relatedMatching': '',
          'renovationType': '',
          'residentialId': '',
          'resourcesList': [
            {}
          ],
          'roomArea': 0,
          'roomOrientation': '',
          'roomType': '',
          'roommateType': '',
          'settlingTime': '',
          'showPictures': '',
          'tagsType': '',
          'title': '',
          'totalFoor': 0,
          'totalTenants': 0,
          'vrPath': ''
        }
      }
    },
    created() {
      this.getMb()
      resourcesList(this.$route.query.id).then(({ data }) => {
        this.resourcesList = data
      })
      // 小区列表
      residentialList({
        curPage: 1,
        pageSize: 999,
        name: ''
      }).then(data => {
        this.residentialIdOptions = data.data.records
      })
      if (this.$route.query.id) {
        rentDetail(this.$route.query.id).then(({ data }) => {
          this.detail = data
          this.detail.relatedMatching = this.detail.relatedMatching.split(',')
          this.detail.tagsType = this.detail.tagsType.split(',')
        })
      }
    },
    methods: {
		ok(id){
				  lupdateStatus({
				    id: id,
				    status: 1
				  }).then(data => {
				    Is.tip('设置成功')
				  })
		},
		back(id){
			this.$prompt('请输入打回理由', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消'
			        }).then(({ value }) => {
						lupdateStatus({
						  id: id,
						  status:4,
						  noReason:value
						}).then(data => {
						  Is.tip('设置成功')
						})
			        }).catch(() => {
			               
			        });
				
		},
      handleRemove(item, index) {
        resourcesDelete([item.id]).then(data => {
          Is.tip('删除成功')
          resourcesList(this.detail.id).then(({ data }) => {
            this.resourcesList = data
          })
        })
      },
      // 上传成功之后的回调
      handleSuccess(res, type) {
        if (res.code === 200) {
          resourcesAdd({
            dataId: this.$route.query.id,
            resourcesList: [{ pictureUrl: res.data, type: type }]
          }).then(data => {
            Is.tip('上传成功')
            resourcesList(this.$route.query.id).then(({ data }) => {
              this.resourcesList = data
            })
          })
        }
      },
      getMb() {
        developersList({
          curPage: 1,
          pageSize: 9999,
          name: ''
        }).then(({ data }) => {
          this.developersIdOptions = data.records
        })
      },
      // 上传图片之前的验证
      handleUpload() {
      },
      // 添加/编辑
      submit() {
        // 验证不通过则不提交
        if (!this.vertify()) {
          return false
        }
        const param = JSON.parse(JSON.stringify(this.detail))
        param.relatedMatching = param.relatedMatching.join(',')
        param.tagsType = param.tagsType.join(',')
        if (this.$route.query.id) {
          // 编辑
          rentUpdate(param).then(data => {
            Is.tip('编辑成功', 2000, 'success')
            this.$router.back()
          })
        } else {
          // 新增
          rentAdd(param).then(data => {
            Is.tip('添加成功', 2000, 'success')
            this.$router.back()
          })
        }
      },
      // 返回
      cancel() {
        this.$router.back()
      },
      vertify() {
        // if (Is.empty(this.detail.title)) {
        //   Is.tip('请输入标题')
        //   return false
        // }
        return true
      }
    }}
</script>
